<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿服务 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .navbar {
            background-color: #0052d9;
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .tab-container {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            background: white;
            padding: 0 8px;
            position: sticky;
            top: 56px;
            z-index: 90;
        }
        .tab {
            padding: 12px 16px;
            font-size: 14px;
            position: relative;
        }
        .tab.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 16px;
            right: 16px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 3px;
        }
        .volunteer-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 16px;
        }
        .card-banner {
            height: 120px;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .card-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
        }
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 4px;
            color: white;
        }
        .status-recruiting {
            background-color: #0052d9;
        }
        .status-active {
            background-color: #00a870;
        }
        .status-completed {
            background-color: #9e9e9e;
        }
        .volunteer-point {
            color: #0052d9;
            font-weight: 500;
            font-size: 15px;
        }
        .point-badge {
            display: inline-flex;
            align-items: center;
            background-color: rgba(0,82,217,0.1);
            color: #0052d9;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 12px;
        }
        .bottom-nav {
            border-top: 1px solid #eee;
            background: white;
            padding: 8px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            z-index: 100;
        }
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .bottom-nav-item.active {
            color: #0052d9;
        }
        .search-bar {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
        }
        .search-bar input {
            background: transparent;
            border: none;
            color: white;
            outline: none;
            width: 100%;
        }
        .search-bar input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .hero-section {
            background-image: linear-gradient(135deg, #0052d9, #6094fc);
            color: white;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 16px;
        }
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            border-radius: 8px;
            padding: 12px;
            width: 23%;
        }
        .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: #0052d9;
            margin-bottom: 4px;
        }
        .stat-label {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="pb-16"> <!-- 底部导航栏的空间 -->
        <!-- 顶部导航栏 -->
        <div class="navbar px-4 py-3">
            <div class="flex justify-between items-center">
                <h1 class="text-lg font-bold">志愿服务</h1>
                <div class="flex items-center">
                    <button class="w-8 h-8 flex items-center justify-center">
                        <i class="t-icon t-icon-notification text-white"></i>
                    </button>
                </div>
            </div>
            
            <!-- 搜索栏 -->
            <div class="search-bar mt-3">
                <i class="t-icon t-icon-search text-white opacity-70 mr-2"></i>
                <input type="text" placeholder="搜索志愿活动">
            </div>
        </div>
        
        <!-- 分类选项卡 -->
        <div class="tab-container">
            <div class="tab active">全部</div>
            <div class="tab">景区服务</div>
            <div class="tab">环保清洁</div>
            <div class="tab">文化传播</div>
            <div class="tab">旅游引导</div>
            <div class="tab">应急救援</div>
        </div>
        
        <!-- 主要内容区 -->
        <div class="p-4">
            <!-- 志愿者数据统计 -->
            <div class="hero-section">
                <h2 class="text-lg font-bold mb-3">我的志愿服务</h2>
                <div class="flex justify-between">
                    <div class="stat-item">
                        <div class="stat-value">685</div>
                        <div class="stat-label">积分</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">12</div>
                        <div class="stat-label">活动</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">48</div>
                        <div class="stat-label">小时</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">4</div>
                        <div class="stat-label">勋章</div>
                    </div>
                </div>
            </div>
            
            <!-- 近期活动 -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-bold">近期活动</h2>
                    <span class="text-blue-600 text-sm">查看全部</span>
                </div>
                
                <!-- 活动卡片1 -->
                <div class="volunteer-card">
                    <div class="card-banner" style="background-image: url('https://images.unsplash.com/photo-1488998427799-e3362cec87c3')">
                        <div class="absolute top-2 right-2">
                            <span class="status-tag status-recruiting">招募中</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-bold text-lg mb-1">黄果树景区环保志愿服务</h3>
                        <div class="flex items-center text-sm text-gray-500 mb-3">
                            <i class="t-icon t-icon-time text-gray-400 mr-1"></i>
                            <span>2023-06-15 09:00-12:00</span>
                            <span class="mx-2">|</span>
                            <i class="t-icon t-icon-location text-gray-400 mr-1"></i>
                            <span>黄果树景区</span>
                        </div>
                        <div class="flex flex-wrap mb-3">
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">环保清洁</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">自然保护</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">景区服务</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">
                            参与黄果树景区环境保护志愿活动，维护自然生态环境，宣传环保理念，为游客提供咨询服务
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="point-badge">
                                <i class="t-icon t-icon-discount text-xs mr-1"></i>
                                <span>积分 +50</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-3">已报名: 24/30</span>
                                <button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm">立即报名</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 活动卡片2 -->
                <div class="volunteer-card">
                    <div class="card-banner" style="background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945')">
                        <div class="absolute top-2 right-2">
                            <span class="status-tag status-active">进行中</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-bold text-lg mb-1">青岩古镇导游志愿服务</h3>
                        <div class="flex items-center text-sm text-gray-500 mb-3">
                            <i class="t-icon t-icon-time text-gray-400 mr-1"></i>
                            <span>2023-05-20 至 2023-08-20</span>
                            <span class="mx-2">|</span>
                            <i class="t-icon t-icon-location text-gray-400 mr-1"></i>
                            <span>青岩古镇</span>
                        </div>
                        <div class="flex flex-wrap mb-3">
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">旅游引导</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">文化传播</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">古镇保护</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">
                            为游客提供青岩古镇历史文化讲解服务，参与古镇文化保护工作，弘扬传统文化，提升游客体验
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="point-badge">
                                <i class="t-icon t-icon-discount text-xs mr-1"></i>
                                <span>积分 +15/小时</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-3">长期招募</span>
                                <button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 热门活动 -->
            <div>
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-lg font-bold">热门活动</h2>
                    <span class="text-blue-600 text-sm">查看全部</span>
                </div>
                
                <!-- 活动卡片3 -->
                <div class="volunteer-card">
                    <div class="card-banner" style="background-image: url('https://images.unsplash.com/photo-1516531558361-f6c4c956a04c')">
                        <div class="absolute top-2 right-2">
                            <span class="status-tag status-recruiting">招募中</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-bold text-lg mb-1">荔波小七孔景区摄影志愿服务</h3>
                        <div class="flex items-center text-sm text-gray-500 mb-3">
                            <i class="t-icon t-icon-time text-gray-400 mr-1"></i>
                            <span>2023-07-01 至 2023-08-31</span>
                            <span class="mx-2">|</span>
                            <i class="t-icon t-icon-location text-gray-400 mr-1"></i>
                            <span>荔波小七孔</span>
                        </div>
                        <div class="flex flex-wrap mb-3">
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">文化宣传</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">摄影爱好</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">景区服务</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">
                            为游客提供免费拍照服务，参与景区宣传图片拍摄，在社交媒体展示荔波小七孔的自然美景
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="point-badge">
                                <i class="t-icon t-icon-discount text-xs mr-1"></i>
                                <span>积分 +20/小时</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-sm text-gray-500 mr-3">已报名: 18/25</span>
                                <button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm">立即报名</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 活动卡片4 -->
                <div class="volunteer-card">
                    <div class="card-banner" style="background-image: url('https://images.unsplash.com/photo-1527525443983-6e60c75fff46')">
                        <div class="absolute top-2 right-2">
                            <span class="status-tag status-completed">已结束</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-bold text-lg mb-1">平坝樱花节志愿服务</h3>
                        <div class="flex items-center text-sm text-gray-500 mb-3">
                            <i class="t-icon t-icon-time text-gray-400 mr-1"></i>
                            <span>2023-03-10 至 2023-04-10</span>
                            <span class="mx-2">|</span>
                            <i class="t-icon t-icon-location text-gray-400 mr-1"></i>
                            <span>平坝樱花园</span>
                        </div>
                        <div class="flex flex-wrap mb-3">
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">节日活动</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">游客服务</span>
                            <span class="mr-2 mb-2 px-2 py-1 bg-gray-100 rounded-md text-xs">环境保护</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-3">
                            为平坝樱花节期间的游客提供引导服务，维护樱花园环境，协助组织文化活动，宣传樱花文化
                        </p>
                        <div class="flex justify-between items-center">
                            <div class="point-badge">
                                <i class="t-icon t-icon-discount text-xs mr-1"></i>
                                <span>积分 +60</span>
                            </div>
                            <div class="flex items-center">
                                <button class="bg-gray-200 text-gray-600 px-4 py-1 rounded-full text-sm">活动回顾</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 